@use 'sass:map';
@use '@angular/material' as mat;
@use 'packages/angular/theming' as theming;
@use '@metad/ocap-angular' as ocap;
@use 'packages/angular';
@use './app/app-theme' as app;

// Include non-theme styles for core.
@include mat.core();

// Define a theme.
$primary: mat.define-palette(mat.$blue-grey-palette, 600);
$accent:  mat.define-palette(mat.$amber-palette, A700, A400, A200);

$material-typeface: "Lato, 'Noto Serif SC', monospace";
// mat.$light-theme-background-palette: map-merge(mat.$light-theme-background-palette, (surface: rgba(255, 255, 255, 0.875)));
$custom-typography: mat.define-typography-config(
  $font-family: $material-typeface
);
$mat-theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent:  $accent,
  ),
  density: -1,
));

// Include all theme styles for the components.
@include mat.all-component-themes($mat-theme);
// @include mat.typography-hierarchy($mat-theme);
@include theming.core-theme($mat-theme);
@include theming.analytical-grid-theme($mat-theme);
@include theming.breadcrumb-theme($mat-theme);
@include theming.controls-theme($mat-theme);
@include theming.entity-theme($mat-theme);
@include theming.common-color($mat-theme);
@include theming.common-density($mat-theme);
@include app.color($mat-theme);

@tailwind base;
@tailwind components;
@tailwind utilities;


// Define a theme.
// $dark-primary: mat.define-palette(mat.$deep-purple-palette);
// $dark-accent: mat.define-palette(mat.$teal-palette);
// $dark-primary: mat.define-palette(mat.$indigo-palette);
$dark-primary: mat.define-palette(mat.$blue-grey-palette, 600);
$dark-accent: mat.define-palette(mat.$amber-palette, A700, A400, A200);

$light-secondary-text: rgba(white, 0.7);
$light-disabled-text: rgba(white, 0.5);
$light-dividers: rgba(white, 0.12);
$grey-palette: mat.$grey-palette;
$dark-theme: map.deep-merge(mat.define-dark-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
  )
 )),
  (
    color: (
      background: (
        status-bar: #151a30,
        app-bar:    #263238,
        // background: black,
        // background: #0e1315, // darker than $dark-primary 900
        hover:      rgba(white, 0.1), // TODO(kara): check style with Material Design UX
        card:       mat.get-color-from-palette($dark-primary, 900), //#192038, //#222b45,
        dialog:     mat.get-color-from-palette($dark-primary, 800),
        disabled-button: rgba(white, 0.12),
        raised-button: map.get($grey-palette, 800),
        // focused-button: $light-focused,
        selected-button: map.get($grey-palette, 700),
        selected-disabled-button: map.get($grey-palette, 800),
        disabled-button-toggle: black,
        unselected-chip: map.get($grey-palette, 700),
        disabled-list-option: black,
        tooltip: map.get($grey-palette, 700),
      ),
      // TODO 没起作用
      foreground: (
        base:              white,
        divider:           $light-dividers,
        dividers:          $light-dividers,
        disabled:          $light-disabled-text,
        disabled-button:   rgba(white, 0.3),
        disabled-text:     $light-disabled-text,
        elevation:         black,
        hint-text:         $light-disabled-text,
        secondary-text:    $light-secondary-text,
        icon:              white,
        icons:             white,
        text:              white,
        slider-min:        white,
        slider-off:        rgba(white, 0.3),
        slider-off-active: rgba(white, 0.3),
      )
    )
  )
);

$custom-typography: mat.define-typography-config(
  $font-family: $material-typeface
);

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
// @include mat.core($custom-typography);

.dark {
  --ngm-copilot-bg-color: theme('colors.neutral.900');
  @include mat.all-component-colors($dark-theme);
  @include theming.core-theme($dark-theme);
  @include theming.analytical-grid-theme($dark-theme);
  @include theming.breadcrumb-theme($dark-theme);
  @include theming.controls-theme($dark-theme);
  @include theming.entity-theme($dark-theme);
  @include theming.common-color($dark-theme);
  @include app.color($dark-theme);
}


/* You can add global styles to this file, and also import other style files */
html {
  font-size: 14px;
  --ngm-copilot-bg-color: theme('colors.white');
}

.mat-button-base.mat-menu-trigger.active {
  @apply bg-slate-100;
}

.mat-mdc-icon-button.mat-mdc-button-base {
  line-height: normal;
}